<template>
  <dt-modal-edit ref='edit' :title='title' :loading="loading" :label-width='100' okText='确认'
    :width='800' @ok='onOk'>
    <div class="allot_modal">
      <Row class="label_warp">
        <Col span="24" class="tips">
        <Icon type="md-alert" class="tips_icon" />
        <div>已选择{{selectNum}}个线索进行分配</div>
        </Col>
      </Row>
      <dt-info ref="info1" :options="options1" :info="info" :label-width="130">
      </dt-info>
      <div class="setTips">提示：用隐私号回拨需要先给顾问配置隐私号
        <span class="setBtn" @click="toReceiver">前往配置</span>
      </div>
      <dt-info ref="info2" :options="options2" :info="info" :label-width="130">
      </dt-info>
      <div slot="bottom" v-if="info.type=='2'">
        <div>
          <label class="user_label">选择顾问:</label>
          <p class="select_user">
            当前已选{{selectUser.length}}个
            <span class="add_edit_btn" @click="addUser" v-if="selectUser.length">
              <Icon type="md-add-circle" /> 重新选择
            </span>
            <span class="add_edit_btn" @click="addUser" v-else>
              <Icon type="md-add-circle" /> 添加顾问
            </span>
          </p>
        </div>

      </div>
    </div>
    <select-user ref="selectUser" @success='onSuccess' />
  </dt-modal-edit>
</template>

<script>
  import allotEdit from '../opt/allotedit'
  import selectUser from './selectUser.vue'
  import clueImportMgr from '@/biz/customer/clueImport'
  export default {
    components: { selectUser },
    data() {
      return {
        loading: false,
        title: '线索分配 ',
        options1: [],
        options2: [],
        info: {},
        selectNum: 0,
        selectUser: [],
        recordIds: [],
        batchId: ''
      }
    },
    methods: {
      show(data) {
        this.batchId = data.batchId
        this.selectNum = data.num
        this.recordIds = data.recordIds
        this.info = {
          housesId: '',
          isPrivacy: '',
          type: '',
          isCreateTask: '',
        }
        this.$refs.edit.show()
        this.$refs.info1.resetFields()
        this.$refs.info2.resetFields()
        this.options1 = new allotEdit(this).options().options1
        this.options2 = new allotEdit(this).options().options2
      },
      addUser() {
        let buildingId = this.info.housesId
        if (!buildingId) return this.$Message.warning('请先选择案场')
        let data = {
          selectUser: this.selectUser,
          isPrivacy: this.info.isPrivacy,
          buildingId
        }
        this.$refs.selectUser.show(data)
      },
      //隐私号回拨change
      changeHandel(data) {
        this.selectUser = []
      },
      onSuccess(data) {
        this.selectUser = data
      },
      toReceiver() {
        this.$router.push({
          name: 'receiver'
        })
      },
      cancelData() {
        this.info = {
          housesId: '',
          isPrivacy: '',
          type: '',
          isCreateTask: '',
        }
        this.selectUser = []
      },
      hide() {
        this.info = {
          housesId: '',
          isPrivacy: '',
          type: '',
          isCreateTask: '',
        }
        this.selectUser = []
        this.$refs.edit.hide()
      },
      onValidate1() {
        return this.$refs.info1.validate()
      },
      onValidate2() {
        return this.$refs.info2.validate()
      },
      onOk() {
        Promise.all([this.onValidate1(), this.onValidate2()]).then((res) => {
          if (res[0] && res[1]) {
            if (this.info.type == 2 && this.selectUser.length == 0) {
              return this.$Message.warning('请选择顾问')
            }
            console.log(this.info, 'info')
            let userIds = this.selectUser.map(item => { return item.userId })
            let { isCreateTask, isPrivacy, type } = this.info
            let params = {
              buildingId: this.info.housesId,
              isCreateTask,
              isPrivacy,
              type,
              recordIds: this.recordIds,
              userIds,
              batchId: this.batchId
            }
            console.log(params)
            clueImportMgr.allocateImportedClue(params).then(res => {
              this.$Message.success('分配成功')
              this.$emit('success')
              this.hide()
            })
          }
        })
      }
    },
  }
</script>

<style lang='scss' scoped>
  .allot_modal {
    .label_warp {
      margin: 15px 0;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 10px;
    }

    .tips {
      line-height: 20px;
      font-size: 14px;
      display: flex;
      justify-content: center;

      .tips_icon {
        font-size: 20px;
        color: #0f42a7;
        vertical-align: sub;
      }
    }

    .setTips {
      color: #F59A23;
      margin-left: 130px;
      margin-bottom: 24px;

      .setBtn {
        color: #0f42a7;
        cursor: pointer;
      }
    }

    .user_label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #515a6e;
      line-height: 1;
      padding: 10px 12px 10px 0;
      box-sizing: border-box;
      width: 130px;
    }

    .user_label:before {
      content: '*';
      display: inline-block;
      margin-right: 4px;
      line-height: 1;
      font-family: SimSun;
      font-size: 14px;
      color: #ed4014;
    }

    .select_user {
      margin-left: 130px;
      position: relative;
      line-height: 32px;
      font-size: 14px;
    }

    .add_edit_btn {
      color: #0f42a7;
      cursor: pointer;
      margin-right: 10px;
    }
  }
</style>